import hljs from 'highlight.js/lib/core'
import 'highlight.js/styles/atom-one-dark.css'
import myPostcss from './transfer';
import copy from './copy';

hljs.registerLanguage('css', require('highlight.js/lib/languages/css')); // 只加载css高亮文件

console.log(hljs)

const submitBtn = document.getElementById('submitBtn') // 提交按钮
const rawCodes = document.getElementById('rawCodes') // 左侧的可输入的文本域
const resultCode = document.getElementById('resultCode') // 右侧结果
const browerlist = document.getElementById('broswerlist')
let resultCss; // 用postcss + autofixer转换后的css文本，用于复制的时候使用

submitBtn.onclick = function () {
    let css = rawCodes.value.replace(/\t/g, '    '); // 使用正则把所有制表符换乘四个空格，防止转换后排版问题

    myPostcss(css, browerlist.value).then(res => {
        let highlightResult = hljs.highlightAuto(res.css).value // 使用highlight.js高亮结果
        resultCss = res.css;
        resultCode.innerHTML = highlightResult
    })
}

// 给输入框设置默认值作为示例
rawCodes.value = `div {
    display: flex;
}`


// 初始化highlight.js
hljs.initHighlightingOnLoad();

// 复制
document.querySelector('#copyBtn').addEventListener('click', function () {
    let copyText;

    if (resultCss) {
        copyText = resultCss;
    } else {
        copyText = `div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}`
    }

    copy(copyText);
});
